<template>
  <div class="flexContent">
    <div class="top">
      <h3>采购信息</h3>
      <div class="rows">
        <!-- <span style="color: red">*</span> -->
        <span class="col">采购订单编号：{{ buyNumber }}</span>
        <span class="col">采购员：{{ username }}</span>
        <span class="col">收货仓库：{{ warehouseName }}</span>

      </div>
      <div class="rows">
        <span class="col">期望到货日期：{{ desireDate }}</span>
        <span class="col">订单失效日期：{{ expireDate }}</span>
        <span class="col">备注：{{ remake ? remake : "无" }}</span>
      </div>
    </div>
    <div class="table">
      <div>
        <el-table border class="tablebox" show-summary :summary-method="getSummaries" :max-height="475" :data="tableData" size="medium">
          <el-table-column label="序号" type="index" align="center" width="80" />
          <el-table-column label="商品" prop="name" align="center" />
          <!-- <el-table-column align="center" label="助记符" prop="mnemonic" />
          <el-table-column align="center" label="商品条码" prop="firstCode" /> -->
          <el-table-column align="center" label="规格" prop="standard" />
          <el-table-column align="center" label="单位" prop="unitName" />
          <el-table-column align="center" label="产地" prop="producer" />
          <el-table-column align="center" label="大包装" prop="bigPacking" />
          <el-table-column align="center" label="件数" prop="pieceNumber" />
          <el-table-column align="center" label="采购数量" prop="buyNumber" />
          <el-table-column align="center" label="进货价" prop="agreedPrice" />
          <el-table-column align="center" label="金额（元）" prop="buyMoney" />
          <el-table-column align="center" label="税率" prop="taxRate" />
        </el-table>
      </div>
    </div>
    <div class="returnBtn">
      <el-button class="celBtn" @click="returnList">返 回</el-button>
    </div>
  </div>
</template>

<script>
import { getSupplierOrderDetail } from "@/api/supplier";
export default {
  name: "SupplierOrderDetail",
  data() {
    return {
      tableData: [],
      supplierId: "",
      username: "",
      desireDate: "",
      expireDate: "",
      warehouseName: "",
      remake: "",
      totalNum: null,
      totalPrice: null,
      buyNumber: "",
      totalPiece: null,
    };
  },
  created() {
    this.supplierId = this.$route.query.id ? this.$route.query.id : "";
    console.log(this.supplierId);
    this.getSupplierOrderDetail();
  },
  methods: {
    returnList() {
      this.closeTag({ path: "supplierOrder" });
    },
    async getSupplierOrderDetail() {
      const res = await getSupplierOrderDetail({ id: this.supplierId });
      if (res.code === 200) {
        this.tableData = res.data.buyDetailsList;
        this.username = res.data.username;
        this.desireDate = res.data.desireDate;
        this.expireDate = res.data.expireDate;
        this.warehouseName = res.data.warehouseName;
        this.totalNum = res.data.totalNum;
        this.totalPiece = res.data.totalPiece;
        this.buyNumber = res.data.buyNumber;
        this.totalPrice = res.data.totalPrice.toFixed(2);
        this.remake = res.data.remake;
        console.log(res.data);
      }
    },
    // 合计
    getSummaries(param) {
      const { columns } = param; // columns是每列的信息，data是每行的信息
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计"; // 此处是在index=0的这一列显示为“合计”
          return;
        }
        if (column.property === "buyNumber") {
          // 官网是不为空的条件，我改成我想要的列，
          sums[index] = this.totalNum;
          sums[index];
        } else if (column.property === "buyMoney") {
          sums[index] = this.totalPrice + "元";
          sums[index];
        } else {
          sums[index] = this.totalPiece
        }
      });
      return sums; // 然后....sums就是我想要的结果了
    },
  },
};
</script>

<style scoped lang="scss">
.flexContent {
  .top {
    h3 {
      margin: 0;
      margin-bottom: 10px;
    }

    .rows {
      display: flex;
      margin-bottom: 20px;

      .col {
        width: 33%;
      }
    }
  }
}
</style>
